<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">商户划拨</div>
                <div class="fls"></div>
            </div>
        </van-sticky>
        <div class="ibvosdyd">
            <div class="headername">
                <div class="zuobian">商户名称</div>
                <div class="youbian">商户名称</div>
            </div>
            <div class="shezhie">设置汇率</div>
            <div class="u_bodys">
                <div class="u_heade">
                    <div class="usdersd" :class="actives == index? 'ab_usd':''" v-for="(item,index) in u_list" :key="index" @click="newdata(index)">
                        <div>{{item}}</div>
                        <img v-show="actives == index" src="../../../static/images/setyrbu.png" alt="">
                    </div>
                </div>

                <div class="setting">设置扫码汇率</div>

                <!-- 支付宝 -->
                <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-zfb.png" alt="">
                        <div class="title">支付宝</div>
                    </div>
                    <div class="right">0.23%</div>
                </div>
                <!-- 微信 -->
                <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-wzzf.png" alt="">
                        <div class="title">微信</div>
                    </div>
                    <div class="right">0.23%</div>
                </div>
                <!-- 云闪付 -->
                <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-ysf.png" alt="">
                        <div class="title">云闪付</div>
                    </div>
                    <div class="right">0.23%</div>
                </div>
                <div class="setting">设置POS刷卡费率</div>
                <!-- 信用卡 -->
                <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-xyk.png" alt="">
                        <div class="title">信用卡</div>
                    </div>
                    <div class="right">0.23%</div>
                </div>
                <!-- 储蓄卡 -->
                <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-cxk.png" alt="">
                        <div class="title">储蓄卡</div>
                    </div>
                    <div class="right">0.23%</div>
                </div>
                <!-- 储蓄卡封顶手续费 -->
                <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-xyk.png" alt="">
                        <div class="title">储蓄卡封顶手续费</div>
                    </div>
                    <div class="right">18元</div>
                </div>
                <!-- 小额双免费率 -->
                <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-sk.png" alt="">
                        <div class="title">小额双免费率</div>
                    </div>
                    <div class="right">0.23%</div>
                </div>
            </div>

            <div class="inokcent" @click="toindex()">确定</div>
        </div>
    </div>
</template>

<script>
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            actives:0,
            u_list:['同总部汇率','自定义汇率'],

        }
    },
    methods:{
        newdata(index){
            this.actives = index
        },
        toindex(){
            this.$router.push({ name: "Index" });
        }
    }

}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .ibvosdyd{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }
    .headername{
        width: 100%;
        height: 56px;
        border-radius: 4px;
        padding: 0 16px;
        box-sizing: border-box;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .headername>.zuobian{
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .headername>.youbian{
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .shezhie{
        width: 100%;
        padding: 12px 0;
        box-sizing: border-box;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }

    .u_bodys{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFFFFF;
    }
    .u_heade{
        width: 100%;
        /* padding: 0 40px;
        box-sizing: border-box; */
        display: flex;
        align-items: centerc;
        justify-content: center;
    }
    .usdersd{
        width: 104px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #BDBDBD;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
        position: relative;
    }
    .usdersd:nth-child(1){
        margin-right: 20px;
    }
    .usdersd>img{
        width: 18px;
        height: 18px;
        position: absolute;
        top: 0;
        right: -1px;
    }
    .ab_usd{
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #3288FF !important;
 
    }

    .setting{
        width: 100%;
        margin-top: 24px;
        margin-bottom: 8px;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }

    .scheduleList{
        width: 100%;
        height: 41px;
        border-bottom: 1px solid #F2F2F2;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .scheduleList>.left{
        display: flex;
        align-items: center;
    }
    .scheduleList>.left>img{
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }
    .scheduleList>.left>.title{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .scheduleList>.right{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .inokcent{
        width: 100%;
        margin-top: 40px;
        margin-bottom: 40px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
</style>